<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            float: left;
            list-style-type: none;
            border: 1px solid #cccccc;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        .active{
            background: #4CAF50;
        }
        li:hover{
            background: #ddd;
            cursor: pointer;
        }
    </style>
    <script src="../scripts/jquery.js"></script>
</head>
<body>

&nbsp;&nbsp;&nbsp;
<ul>
    <li class="prev">&lt;</li>
    <li class="num">1</li>
    <li class="num active">2</li>
    <li class="num">3</li>
    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="num">7</li>
    <li class="next">&gt;</li>
</ul>

<script>
    // $(document).ready(function () {
    //     $(".num").click(function () {
    //         $(".num").removeClass("active");
    //         $(this).addClass("active");
    //     });
    //     $(".prev").click(function () {
    //        let prevElem = $(".active").prev();
    //        if (prevElem.attr("class") !== "prev"){
    //            prevElem.click();
    //        }
    //     });
    //     $(".next").click(function () {
    //         let nextElem = $(".active").next();
    //         if (nextElem.attr("class") !== "next"){
    //             nextElem.click();
    //         }
    //     });
    // })

    $(document).ready(function () {
        $(".num").click(function () {
            $(".active").removeClass(".active");
            $(this).addClass(".active");
        });
        $(".prev").click(function () {
            let prevElem = $(".active").prev();
            if (prevElem.attr("class" !== "prev")){
                prevElem.click();
            }
        });
        $(".next").click(function () {
            let nextElem = $(".active").next();
            if (nextElem.attr("class" !== "next")){
                nextElem.click();
            }
        });
    })
























</script>
</body>
</html>